<template>
    <div class="chartPage">
        <div class="title">散点图-各国人均寿命与GDP关系</div>
        <div class="filter">

        </div>
        <div class="main" ref="chart_Scatter"></div>
    </div>
</template>

<script>
    import life_expectancy from '@a/js/json/life-expectancy.json';

    export default {
        name: "chartScatter",

        components: {},

        props: ['chartsData'],

        data() {
            return {
                option: {},

                itemStyle: {
                    opacity: 0.8,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                schema: [
                    {name: 'Income', index: 0, text: '人均收入', unit: '美元'},
                    {name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
                    {name: 'Population', index: 2, text: '总人口', unit: ''},
                    {name: 'Country', index: 3, text: '国家', unit: ''}
                ]
            }
        },
        created() {},

        mounted() {
            const _this = this;
            _this.init();
            // console.log('chartModule', this.chartsList )
        },
        methods: {
            init() {
                const _this = this;
                _this.setChartShow();
            },

            setChartShow() {
                const _this = this;
                let _data = life_expectancy;
                let option = _this.option;
                let itemStyle = _this.itemStyle;
                let schema = _this.schema;
                // 基于准备好的dom，初始化echarts实例
                let  myChart = _this.$echarts.init( _this.oChartScatter );
                myChart.showLoading();

                option = {
                    baseOption: {
                        timeline: {
                            axisType: 'category',
                            orient: 'vertical',
                            autoPlay: true,
                            inverse: true,
                            playInterval: 1000,
                            left: null,
                            right: 0,
                            top: 20,
                            bottom: 20,
                            width: 55,
                            height: null,
                            label: {
                                color: '#999'
                            },
                            symbol: 'none',
                            lineStyle: {
                                color: '#555'
                            },
                            checkpointStyle: {
                                color: '#bbb',
                                borderColor: '#777',
                                borderWidth: 2
                            },
                            controlStyle: {
                                showNextBtn: false,
                                showPrevBtn: false,
                                color: '#666',
                                borderColor: '#666'
                            },
                            emphasis: {
                                label: {
                                    color: '#fff'
                                },
                                controlStyle: {
                                    color: '#aaa',
                                    borderColor: '#aaa'
                                }
                            },
                            data: []
                        },
                        // backgroundColor: '#404a59',
                        title: [{
                            text: _data.timeline[0],
                            textAlign: 'center',
                            left: '63%',
                            top: '55%',
                            textStyle: {
                                fontSize: 100,
                                color: 'rgba(255, 255, 255, 0.7)'
                            }
                        }, {
                            text: '各国人均寿命与GDP关系演变',
                            left: 'center',
                            top: 10,
                            textStyle: {
                                color: '#aaa',
                                fontWeight: 'normal',
                                fontSize: 20
                            }
                        }],
                        tooltip: {
                            padding: 5,
                            backgroundColor: '#222',
                            borderColor: '#777',
                            borderWidth: 1,
                            formatter: function (obj) {
                                let value = obj.value;
                                return schema[3].text + '：' + value[3] + '<br>'
                                    + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
                                    + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
                                    + schema[2].text + '：' + value[2] + '<br>';
                            }
                        },
                        grid: {
                            top: 100,
                            containLabel: true,
                            left: 30,
                            right: '110'
                        },
                        xAxis: {
                            type: 'log',
                            name: '人均收入',
                            max: 100000,
                            min: 300,
                            nameGap: 25,
                            nameLocation: 'middle',
                            nameTextStyle: {
                                fontSize: 18
                            },
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#ccc'
                                }
                            },
                            axisLabel: {
                                formatter: '{value} $'
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '平均寿命',
                            max: 100,
                            nameTextStyle: {
                                color: '#ccc',
                                fontSize: 18
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#ccc'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                formatter: '{value} 岁'
                            }
                        },
                        visualMap: [
                            {
                                show: false,
                                dimension: 3,
                                categories: _data.counties,
                                calculable: true,
                                precision: 0.1,
                                textGap: 30,
                                textStyle: {
                                    color: '#ccc'
                                },
                                inRange: {
                                    color: (function () {
                                        let colors = ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'];
                                        return colors.concat(colors);
                                    })()
                                }
                            }
                        ],
                        series: [
                            {
                                type: 'scatter',
                                itemStyle: itemStyle,
                                data: _data.series[0],
                                symbolSize: function(val) {
                                    return _this.sizeFunction(val[2]);
                                }
                            }
                        ],
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: 'quinticInOut'
                    },
                    options: []
                };

                for (let n = 0; n < _data.timeline.length; n++) {
                    option.baseOption.timeline.data.push(_data.timeline[n]);
                    option.options.push({
                        title: {
                            show: true,
                            'text': _data.timeline[n] + ''
                        },
                        series: {
                            name: _data.timeline[n],
                            type: 'scatter',
                            itemStyle: itemStyle,
                            data: _data.series[n],
                            symbolSize: function(val) {
                                return _this.sizeFunction(val[2]);
                            }
                        }
                    });
                }


                myChart.setOption( option );
                myChart.hideLoading();

                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            },

            sizeFunction (x) {
                let y = Math.sqrt(x / 5e8) + 0.1;
                return y * 80;
            }
        },

        computed: {
            oChartScatter() {
                return this.$refs.chart_Scatter;
            }
        },
    }
</script>

<!--<style scoped lang="scss">-->
<!--    @import "chartScatter";-->
<!--</style>-->

